import React, { useMemo } from 'react';
import { isEmpty } from '@/utils/common';
import styles from './Price.less';

interface IPrice {
  price: string | number;
  discount?: boolean;
  del?: boolean;
}

const Price: React.FC<IPrice> = props => {
  const realPrice = useMemo(() => {
    const { price = '' } = props;
    if (isEmpty(price)) {
      return '0';
    }
    if (price === '-') return price;
    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }, [props.price]);

  return (
    <span className={`${styles.price} ${props.del ? styles.del : ''}`}>
      {!props.discount && <i>￥</i>}
      <span>{realPrice}</span>
      {props.discount && <i>折</i>}
    </span>
  );
};

export default Price;
